<template>
    <!-- :model="ruleForm" -->
    <div class="addBrand_box">
        <el-form :model="ruleForm" ref="ruleFormRef" label-width="120px" class="demo-ruleForm" size="default" status-icon>
            <el-form-item label="属性名称:" prop="name">
                <el-input v-model="ruleForm.name" />
            </el-form-item>
            <el-form-item label="商品分类:" prop="type">
                <el-select v-model="ruleForm.handAddStatus
                    " class="m-2" placeholder="Select" size="large">
                    <el-option v-for="item in ruleForm.type" :key="item" :label="item">{{ ruleForm.type.item }}</el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="分类筛选样式:" prop="filterType
">
                <el-radio-group v-model="ruleForm.filterType
                    " class="ml-4">
                    <el-radio label="0" size="large">普通</el-radio>
                    <el-radio label="1" size="large">颜色</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="能否进行检索:" prop="searchType">
                <el-radio-group v-model="ruleForm.searchType" class="ml-4">
                    <el-radio label="0" size="large">不需要检索</el-radio>
                    <el-radio label="1" size="large">关键字检索</el-radio>
                    <el-radio label="2" size="large">范围检索</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="商品属性关联:" prop="relatedStatus">
                <el-radio-group v-model="ruleForm.relatedStatus" class="ml-4">
                    <el-radio label="0" size="large">是</el-radio>
                    <el-radio label="1" size="large">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="属性是否可选:" prop="selectType">
                <el-radio-group v-model="ruleForm.selectType" class="ml-4">
                    <el-radio label="0" size="large">唯一</el-radio>
                    <el-radio label="1" size="large">单选</el-radio>
                    <el-radio label="2" size="large">复选</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="属性值的录入方式:" prop="inputType">
                <el-radio-group v-model="ruleForm.inputType" class="ml-4">
                    <el-radio label="0" size="large">手工录入</el-radio>
                    <el-radio label="1" size="large">从下面列表中选择</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="属性值可选值列表:" prop="inputList">
                <el-input type="textarea" v-model="ruleForm.inputList" />
            </el-form-item>
            <el-form-item label="是否支持手动新增:" prop="handAddStatus">
                <el-radio-group v-model="ruleForm" class="ml-4">
                    <el-radio label="1" size="large">是</el-radio>
                    <el-radio label="0" size="large">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="排序属性:" prop="sort">
                <el-input v-model="ruleForm.sort" />
            </el-form-item>
            <el-button type="primary" class="btn" @click="btn(currentId)">提交</el-button>
        </el-form>
    </div>
</template>

<script setup lang='ts'>
import { XiuGaiShangPinShuXinApi } from "@/http/ums/api"
import router from "@/router";
// @ts-ignore
import { ElMessageBox, ElMessage } from 'element-plus';
import { reactive, ref } from 'vue';
import { useRoute } from "vue-router";

let initFrom = {
    filterType: 0,
    handAddStatus: 0,
    inputList: '',
    inputType: 0,
    name: "",
    productAttributeCategoryId: 0,
    relatedStatus: 0,
    searchType: 0,
    selectType: 0,
    sort: 0,
    type: 0,
}
const ruleForm = reactive<any>({
    ...initFrom
})

const route = useRoute()
const currentId = ref<any>(0)
currentId.value = route.query.id

const btn = (id: number) => {
    // console.log(id);
    // console.log(currentId.value);
    ElMessageBox.confirm("确定要提交吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
    })
        .then(() => {
            XiuGaiShangPinShuXinApi({
                ...ruleForm,
                id
            }).then((res: any) => {
                // console.log(res);
                if (res.code === 200) {
                    // Object.assign(ruleForm, res.data);
                    ElMessage({
                        type: "success",
                        message: "提交成功",
                    })
                    //  fetch(ruleForm);
                    router.back()
                }
            })
        })
}
</script>

<style lang="less" scoped>
.addBrand_box {
    width: 792px;
    border: 1px solid #ebeef5;
    padding: 65px;
    margin: 0 auto;
    box-sizing: border-box;
}

.danxuan {
    display: flex;
    // justify-content: center;
    align-items: center;
}

.btn {
    margin-left: 150px;
    margin-bottom: 20px;
}
</style>